<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">模板管理</li>
    <li>模板须知</li>
  </ul>
  <div class="layui-tab-content" style="padding: 0px;">
    <div class="layui-tab-item layui-show">
        <div class="layui-card">
            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-list" data-type="add">添加模板</button>
                </div>
                <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
                <script type="text/html" id="switc_status">
                    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="默认|未使用" lay-filter="switch" {{(d.status=='1')?'checked' : '' }}>
                </script>
                <script type="text/html" id="table-content-list">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                </script>
            </div>
        </div>
    </div>
    <div class="layui-tab-item">
        <div class="layui-card">
        <div class="layui-card-body layui-text">
            1、模板压缩包必须为ZIP格式。其他格式无法上传并解压。<br />
            2、模板压缩包内文件必须位于压缩包同名文件夹下，不允许直接打包文件，必须要有子文件夹。<br />
            2、模板压缩包以及文件夹允许使用中文名称，但不建议，容易出现一些异常问题。<br />
            4、上传模板后，压缩包会解压并删除，仅保留解压后的文件夹目录。<br />
            5、模板设置逻辑为：上传压缩包并解压，获取解压绝对路径以及压缩包名称，存储至数据库，前端调用解压路径。<br />
            6、当关闭所有模板后，系统将会调用默认模板及路径，该路径位于模板目录下方。<br />
            7、已启用的模板无法删除，可以取消默认模板后，删除即可。<br />
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'table', 'form', 'layedit'], function () {
    var $ = layui.$
      , admin = layui.admin
      , view = layui.view
      , table = layui.table
      , layedit = layui.layedit
      , form = layui.form;

    //文章管理
    table.render({
      elem: '#LAY-app-content-list'
      , url: '/api/template/getList' //模拟接口
      , cols: [[
        { type: 'checkbox', fixed: 'left' }
        , { type: 'numbers', width: 80, title: 'ID', align: 'center' }
        , { field: 'title', title: '模板名称', width: 120 }
        , { field: 'remark', title: '说明' }
        , { field: 'status', title: '状态', templet: '#switc_status', width: 100, align: 'center' }
        , { field: 'create_time', title: '上传时间', sort: true ,width:200}
        , { title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#table-content-list' }
      ]]
      , page: true
      , limit: 10
      , limits: [10, 15, 20, 25, 30]
      , text: '对不起，加载出现异常！'
      , parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.data //解析数据列表
        };
      }
    });
    form.on('switch(switch)', function (obj) {
        $.post("/api/template/editShu", {
            action: 'editShu',
            id: this.value,
            status: this.name,
            value:  obj.elem.checked
        }, function (data) {
            layer.msg(data.msg ? data.msg : '保存失败！', { icon: 1, time: 2000 });
            layui.table.reload('LAY-app-content-list'); //重载表格
        });
    }); 

    //监听工具条
    table.on('tool(LAY-app-content-list)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('确定删除所选模板？删除后模板将无法回复！', function (index) {
          obj.del();
          layer.close(index);
          admin.req({
            type: "POST",
            url: '/api/template/del',
            data: { ids: data.id },
            dataType: "json",
            success: function (res) {
              layer.msg(res.msg);
              layui.table.reload('LAY-app-content-list'); //重载表格
            }
          });
        });
      }
    });

    form.render(null, 'app-content-list');

    var active = {
        //添加模板
        add: function (othis) {
        admin.popup({
          title: '添加'
          , area: ['700px', '600px']
          , id: 'LAY-popup-content-add'
          , success: function (layero, index) {
            view(this.id).render('/template/add').done(function () {
              form.render(null, 'layuiadmin-app-form-list');

              //监听提交
              form.on('submit(layuiadmin-app-form-submit)', function (data) {
                var field = data.field; //获取提交的字段
                field.lang = lang

                //提交 Ajax 成功后，关闭当前弹层并重载表格
                admin.req({
                  type: "POST",
                  url: '/api/template/add',
                  data: { data: field },
                  dataType: "json",
                  success: function (res) {
                    layer.msg(res.msg, { time: 800 });

                    layui.table.reload('LAY-app-content-list'); //重载表格
                    layer.close(index); //执行关闭
                  }
                });
              });
            });
          }
        });
      }
    };

    $('.layui-btn.layuiadmin-btn-list').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>